<script setup>
  import { ref, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import {postReportExceptionApi} from '@/apis/task'
  // 组件 ref
  const popup = ref(null)
  // 文件提示
  const exceptTime = computed(() => {
    return timePicker.value || '请选择'
  })
  // 异常类型默认显示
  const exceptType = computed(() => {
    return exceptionType.value||'请选择'
  })

  // 任务id
  const taskId = ref('')

  // 异常日期
  const timePicker = ref('')

  // 异常位置
  const placePicker = ref('')
  const exceptionPlace = computed(() => {
    return placePicker.value || '请选择'
  })
  // 异常描述
  const exceptionDescription = ref('')
  // 异常图片
  const exceptionImagesList = [
    {url:'https://www.baidu.com/img/flexible/logo/pc/peak-result.png'}
  ]

  // 定义 popup 组件展示的数据
  const exceptionTypes = ref([
    {text:'发动机启动困难',checked:false},
    {text:'不着车，漏油',checked:false},
    {text:'照明失灵',checked:false},
    {text:'排烟异常、温度异常',checked:false},
    {text:'其他问题',checked:false},
  ])

  // onLoad
  onLoad((params) => {
    taskId.value = params.id
  })

  // 打开地图
  async function onLocationChoose() {

//     uni.chooseLocation({
// 	success: function (res) {
//     placePicker.value = res.address
// 	}
// });

    try {
      const res = await uni.chooseLocation()
      placePicker.value = res.address
    } catch (error) {
      console.log(error);
    }
   
  }
  // 准备的数组
  const checkedList = ref([])
  // 准备的字符串
  const exceptionType = ref('')
  // 选择弹层中的异常类型选项
  const checkboxSelect = (index) => {
    let checkList = []
    // 更改多选框选项
    exceptionTypes.value[index].checked = !exceptionTypes.value[index].checked
   // 筛选已勾选的数组
    checkList = exceptionTypes.value.filter((item) => {
     return item.checked === true
    })
    // 制作数据赋值checked
    checkedList.value = checkList.map((item) => {
      return item.text
    })

  }

  // 点击类型弹层确认按钮
  function onPopupConfirm() {
    console.log(exceptionType.value = checkedList.value.join(','));
    popup.value.close()
  }

  // 打开弹层
  function onPopupOpen() {
    popup.value.open()
  }

  const onSubmit = async() => {
    const form = {
      transportTaskId:taskId.value, // 运输任务id
      exceptionTime:timePicker.value, // 异常时间
      exceptionPlace:placePicker.value, // 异常地点
      exceptionType:exceptionType.value, // 异常类型
      exceptionDescribe:exceptionDescription.value, // 异常描述
      exceptionImagesList:exceptionImagesList // 异常图片

    }
    const res = await postReportExceptionApi(form)
    console.log(res);
    if (res.code === 200) {
      uni.reLaunch({
        url:'/pages/task/index'
      })
    }
    
  }
</script>

<template>
  <view class="page-container">
    <scroll-view class="scroll-view" scroll-y>
      <view style="margin: 30rpx" class="scroll-view-wrapper">
        <uni-list :border="false">
          <uni-list-item show-arrow title="异常时间">
            <template v-slot:footer>
              <uni-datetime-picker v-model="timePicker">
                <view class="picker-value">{{ exceptTime }}</view>
              </uni-datetime-picker>
            </template>
          </uni-list-item>

          <uni-list-item
            show-arrow
            clickable
            ellipsis="1"
            @click="onLocationChoose"
            title="上报位置"
            :rightText="exceptionPlace"
          />
          <uni-list-item
            show-arrow
            clickable
            @click="onPopupOpen"
            title="异常类型"
            :rightText="exceptType"
          />
          <uni-list-item direction="column" title="异常描述">
            <template v-slot:footer>
              <view class="textarea-wrapper">
                <textarea
                v-model="exceptionDescription"
                  class="textarea"
                  placeholder="请输入异常描述"
                ></textarea>
                <view class="words-count">0/50</view>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item
            :border="false"
            style="margin-top: -30rpx"
            direction="column"
            title="上传图片（最多6张）"
          >
            <template v-slot:footer>
              <uni-file-picker limit="6"></uni-file-picker>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
    </scroll-view>
    <view class="fixbar">
      <button class="button disable" @click="onSubmit" >提交</button>
    </view>
    <!-- 异常类型弹层 -->
    <uni-popup ref="popup" :mask-click="true" type="bottom">
      <uni-list class="popup-action-sheet">
        <uni-list-item>
          <template v-slot:header>
            <view class="header">选择类型</view>
          </template>
        </uni-list-item>
        <uni-list-item v-for="(item,index) in exceptionTypes" :key="item.text" :title="item.text">
          <template v-slot:footer>
            <checkbox-group @change="checkboxSelect(index)" class="checkbox">
              <checkbox :checked="item.checked" color="#EF4F3F" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item>
          <template v-slot:body>
            <button @click="onPopupConfirm" class="button">确定</button>
          </template>
        </uni-list-item>
      </uni-list>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
